<template>
	<view class="nav nav-tabs">
		<view class="nav-group">
			<view
				v-for="(tab, i) in tabs"
				:key="i"
				class="nav-item"
				:class="{active:index == i}"
				@click="changeItem(i)">
				{{ tab.text }}
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		tabsIndex: {
			type: Number,
			default:()=> {
				return 0
			}
		},
		tabs: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data () {
		return {
			index: 0
		}
	},
	created(){
		this.index = this.tabsIndex
	},
	methods: {
		changeItem(i){
			this.index = i;
			this.$emit("change", {index: this.index})
		}
	}
}
</script>

<style lang="scss">
	.nav{

	}
	.nav-tabs{
		.nav-group{
			display: flex;
			border-bottom: 1px solid #ee625f;
			border-radius: 10rpx;
			.nav-item{
				width: 49.99%;
				padding: 20rpx 0rpx 19rpx;
				margin-bottom: -1px;
				font-size: 32rpx;
				line-height: 40rpx;
				text-align: center;
				color: #666666;
				border-radius: 10rpx;
				&.active{
					background-color: #ee625f;
					color: #ffffff;
					border-radius: 10rpx;
				}
			}

		}
	}
</style>
